<template>
	<view>
		<view :style="{width: width + 'rpx', height: height + 'rpx'}" v-show="!isDone" class="mask"></view>
		<image :src= "src" lazy-load :style="{width: width + 'rpx', height: height + 'rpx'}" @load="isDone=true"/>
	</view>
</template>

<script>
	export default {
		name:"ugo-image",
		props: {
			src: {type: String, required: true},
			width: { type: Number, default: 120 },
			height: { type: Number, default: 120 },
		},
		data() {
			return {
				isDone: false
			};
		}
	}
</script>

<style>
.mask {
	background-color: rgba(0, 0, 0, 0.5);
	position: relative;
	overflow: hidden;
	display: block;
}
.mask::before {
	content: '';
	position: absolute;
	animation: shan 1.5s ease 0s infinite;
	top: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(
	  to left,
	  rgba(255, 255, 255, 0) 0,
	  rgba(255, 255, 255, 0.3) 50%,
	  rgba(255, 255, 255, 0) 100%
	);
	transform: skewX(-45deg);
}
@keyframes shan {
  0% {
    left: -100%;
  }
  100% {
    left: 120%;
  }
}
</style>